<template>
    <div class="add-card">
        <header class="add-header">
            <el-page-header content="查看详情" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">车辆信息</div>
                <div class="form">
                    <el-form label-width="100px">
                        <el-form-item label="车主姓名" prop="personName">
                            {{ form.personName }}
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phoneNumber">
                            {{ form.phoneNumber }}
                        </el-form-item>
                        <el-form-item label="车辆号码" prop="carNumber">
                            {{ form.carNumber }}
                        </el-form-item>
                        <el-form-item label="车辆品牌" prop="carBrand">
                            {{ form.carBrand }}
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="form-container">
                <div class="title">月卡缴费记录</div>
                <div class="form">
                    <el-table :data="rechargeList" style="width: 100%">
                        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
                        <el-table-column label="有效日期" width="200" header-align="center" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.cardStartDate }} 至 {{ scope.row.cardEndDate }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="paymentAmount" label="支付金额" header-align="center"
                            align="center"></el-table-column>
                        <el-table-column prop="paymentMethod" label="支付方式" header-align="center"
                            align="center"></el-table-column>
                        <el-table-column prop="createTime" width="200" label="办理时间" header-align="center"
                            align="center"></el-table-column>
                        <el-table-column prop="createUser" label="办理人" header-align="center"
                            align="center"></el-table-column>
                    </el-table>
                </div>
            </div>

        </main>
    </div>
</template>

<script>
import { getCarCardDetaiAPI } from '@/api/car'
export default {
    data() {
        return {
            form: {
                personName: '',
                phoneNumber: '',
                carNumber: '',
                carBrand: '',
            },
            rechargeList: [],
        }
    },
    methods: {

    },
    async mounted() {
        const id = this.$route.query.id
        const res = await getCarCardDetaiAPI(id)
        console.log(res)
        this.form.personName = res.data.personName
        this.form.phoneNumber = res.data.phoneNumber
        this.form.carNumber = res.data.carNumber
        this.form.carBrand = res.data.carBrand
        this.rechargeList = res.data.rechargeList
    },
}
</script>

<style  scoped lang="scss">
.add-card {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 0px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                border-top: 1px solid #cccccc;
                margin-bottom: 20px;
                padding: 20px 40px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }

    .add-footer {
        // position: fixed;
        bottom: 0;
        width: 100%;
        padding: 14px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}</style>